<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>我的推广明细</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script type="text/javascript" src="__STATIC__/js/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="__STATIC__/js/doubleDate2.0.js"></script>
		<link rel="stylesheet" type="text/css" href="__STATIC__/css/doubleDate.css" />
		<style>
			body, button, input, select, textarea{font: 12px/1.5 tahoma, arial;}
			body{width: 100%; background: #fff; margin: 0 auto; font-family: Microsoft Yahei, Tahoma, Verdana, Arial, Microsoft JhengHei, YouYuan, SimSun;font-size: 14px;position: relative;}
			html,body{width: 100%;height: 100%;min-width: 1200px; margin: 0 auto; font-family: "微软雅黑";}
			h1, h2, h3, h4, h5, h6{font-size: 100%;}
			button, a{outline: medium none;}
			address, cite, dfn, em, var{font-style: normal;}
			code, kbd, pre, samp{font-family: courier new, courier, monospace;}
			ul, ol, li,p,img{list-style: none outside none;-webkit-margin-before: 0em;-webkit-margin-after: 0em;-webkit-margin-start: 0px;-webkit-margin-end: 0px;-webkit-padding-start: 0px;border: 0;}
			a{text-decoration: none;cursor: pointer; color: #333;}
			img{border: 0 none;display: block}
			button, input, select, textarea{font-size: 100%;}
			.cls:after{clear: both;content: " ";display: block;height: 0;}
			.clear{clear: both;}
			.main{width: 1200px;margin: 0 auto;padding-top: 20px;}
			.m_top{width: 100%;height: 60px;}
			.m_top .m_logo{width: 200px;overflow: hidden;float: left;}
			.m_top .m_logo img{height: 60px;}
			.m_top .m_tit{width: 1000px;float: right;text-align: center;font-size: 30px;line-height: 60px;position: relative;}
			.m_top .m_tit span{font-size: 16px;color: #00a4ff;position: absolute;right: 0; bottom: 20px;line-height: initial;}
			.m_item{width: 100%;height: 100px;background: #eee;margin-top: 20px;}
			.m_item ul li{width: 400px;float: left;text-align: center;line-height: 50px;font-size: 16px;}
			.m_tongj{width: 100%;margin-top: 20px;}
			.m_tongj .tj_xx{height: 40px;line-height: 40px;width: 100%;background: #f4f4f4;border-top: solid 1px #ddd;border-bottom: solid 1px #ddd;}
			.tj_xx ul li{width: 150px;float: left;text-align: center;border-right: solid 1px #ddd;}
			.tj_xx .active{background: #fcfcfc;}
			.tj_box{width: 100%;height: 120px;background: #eee;}
			.tj_box .tj_m{width: 100%;height: 100%;}
			.tj_box .tj_m ul li{width: 20%;float: left;border-right: solid 1px #ddd;height: 120px;}
			.tj_box .tj_m ul li p{font-size: 14px;text-align: center;color: #ff9600;}
			.tj_box .tj_m ul li p:first-child{padding-top: 40px;color: #333;}
			.m_list{width: 100%;margin-top: 20px;border-top: solid 1px #ddd;border-right: solid 1px #ddd;}
			.m_list .m_list_top{width: 100%;height: 38px;line-height: 38px;border-bottom: solid 1px #ddd;background: #eee;}
			.m_list .m_list_top a{width: 170px;display: block;float: left;border-left: solid 1px #ddd;text-align: center;font-size: 14px;}
			.mm_list{width: 100%;}
			.mm_list ul li{width: 100%;border-bottom: solid 1px #ddd;line-height: 38px;height: 38px;}
			.mm_list ul li a{display: block;width: 170px;height:38px;float: left;white-space: nowrap;text-overflow: ellipsis; overflow: hidden;border-left: solid 1px #ddd;text-align: center;font-size: 14px;}
			.mm_list ul li:nth-child(odd){background: #fff;}
			.mm_list ul li:nth-child(even){background: #eee;}
			.xx_xian{color: #00a4ff;}
			.m_search{margin-top: 20px;position: relative;}
			.m_search input{width: 250px;line-height: 30px;font-size: 14px;height: 30px;}
			.m_search label{font-size: 14px;line-height: 30px;margin-left: 8px;}
			.se_span_1{position: absolute;right: 0;top: 0;display: block;height: 30px;line-height: 30px;}
			.se_span_1 a{color: #00a4ff;margin: 0 5px;}
			.xx_tc{width: 100%;height: 100%;background: rgba(0, 0, 0, 0.3);position: fixed;top: 0;left: 0;display: none;}
			.xx_tc .xx_tc_m{width: 800px;height: 500px;background: #fff;position: absolute;}
			.xx_tc_top{background: #fff;height: 60px;width: 100%;line-height: 60px;}
			.xx_tc_top ul li{width: 33.33%;text-align: center;float: left;}
			.xx_tc_bom{width: 100%;height: 440px;overflow: auto;border-top: solid 1px #ddd;}
			.xx_tc_bom .m_list_top{width: 100%;height: 38px;line-height: 38px;border-bottom: solid 1px #ddd;background: #eee;}
			.xx_tc_bom .m_list_top a{width: 130px;display: block;float: left;border-left: solid 1px #ddd;text-align: center;font-size: 14px;}
			.xx_tc_bom .mm_list{width: 100%;}
			.xx_tc_bom .mm_list ul li{width: 100%;border-bottom: solid 1px #ddd;line-height: 38px;height: 38px;}
			.xx_tc_bom .mm_list ul li a{display: block;width: 130px;float: left;border-left: solid 1px #ddd;text-align: center;font-size: 14px;}
			.xx_tc_bom .mm_list ul li:nth-child(odd){background: #fff;}
			.xx_tc_bom .mm_list ul li:nth-child(even){background: #eee;}
			.xx_close{position: absolute;cursor: pointer;right: -15px;top: -15px;width: 30px;height: 30px;background: #00a4ff;color: #fff;border-radius: 50%;text-align: center;font-size: 25px;line-height: 26px;}

		</style>
	</head>

	<body>
		<div class="main">
			<div class="m_top">
				<div class="m_logo cls">
					<img src="__STATIC__/images/logoo.png" />
				</div>
				<div class="m_tit">推广收益查询<span>{$sever_time}</span></div>
			</div>
			<div class="m_item">
				<ul>
					<li>用户ID：<span>{$user_info.user_id|sprintf="%09d",###}</span></li>
					<li>昵称：<span>{$user_info.nickname}</span></li>
					<li>余额：<span>{$user_info.user_money}</span></li>
					<li>金酒币：<span>{$user_info.pay_gold}</span></li>
					<li>银酒币：<span>{$user_info.pay_points}</span></li>
					<li>推广人数：<span>{$user_info.distribut_count}</span></li>
				</ul>
			</div>
			<div class="m_tongj">
<!-- 				<div class="tj_xx cls"> -->
<!-- 					<ul> -->
<!-- 						<li class="active">今天</li> -->
<!-- 						<li>全部</li> -->
<!-- 						<li style="width: auto;"><span style="margin-left: 15px;">时间段选择:</span><span style="margin-left: 20px;"><input type="text" class="doubledate" readonly="readonly" style="margin-right: 20px;" /></span><span><input type="text" class="doubledate" readonly="readonly" /></span></li> -->
<!-- 					</ul> -->
<!-- 				</div> -->
				<div class="tj_box">
					<div class="tj_m cls">
						<ul>
							<li>
								<p>成交单量（单）</p>
								<p>{$distribut_income.distribut_order}单</p>
							</li>
							<li>
								<p>收益金额（元）</p>
								<p>¥{$distribut_incom}元</p>
							</li>
							<li>
								<p>预期收益（元）</p>
								<p>¥{$distribut_income_count}元</p>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="m_search">
				<span style="margin-left: 15px;">时间段选择:</span><span style="margin-left: 20px;"><input type="text" class="doubledate" readonly="readonly" id="starttime" style="margin-right: 20px;" /></span><span><input type="text" class="doubledate" id="endtime" readonly="readonly" /></span>
				<span style="margin-left: 15px;"><input type="search" id="sub_uid" placeholder="请输入搜索ID" /></span><label class="search" style="cursor: pointer;">搜索</label>
			</div>
			<div class="m_list">
				<div class="m_list_top cls">
					<a>ID</a>
					<a>昵称</a>
					<a>手机</a>
					<a>收益</a>
					<a>预期收益</a>
					<a>时间</a>
					<a>下级</a>
				</div>
				<div class="mm_list cls"  id="sub_list">
					<ul>
						<volist name="$distribut_income.distribut_income_detail"  id="vo">
							<li>
								<a>{$vo.user_id}</a>
								<a>{$vo.nickname}</a>
								<a class="mobile">{$vo.mobile}</a>
								<a>+{$vo.distribut_income}</a>
								<a>+{$vo.distribut_income_count}</a>
								<a>{$vo.reg_time}</a>
								<a class="xx_xian" user_id={$vo.user_id} href="javascript:;">TA的下线</a>
							</li>
						</volist>
					</ul>
				</div>
			</div>
			<div class="xx_tc">
				<div class="xx_tc_m">
					<div class="xx_close">×</div>
					<div class="xx_tc_top">
						<ul>
							<li>ID：<span id="sub_id">005200220</span></li>
							<li>昵称：<span id="sub_nickname">我是谁</span></li>
							<li>手机：<span id="sub_mobile"  class="mobile">18525050425</span></li>
						</ul>
					</div>
					<div class="xx_tc_bom">
						<div class="m_list_top cls">
							<a>ID</a>
							<a>昵称</a>
							<a>手机</a>
							<a>收益</a>
							<a>预期收益</a>
							<a>时间</a>
						</div>
						<div class="mm_list cls" id="sub_distribut_list">
							<ul>
								<li>
									<a>ID000002</a>
									<a>无聊的纠结</a>
									<a class="mobile">18508225868</a>
									<a>+58.00</a>
									<a>2017-06-05</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script>
			function attrd() {
				var winW = $("body").width();
				var winH = $("body").height();
				var tcT = (winH - $(".xx_tc_m").height()) / 2;
				var tcL = (winW - $(".xx_tc_m").width()) / 2;
				$(".xx_tc_m").css({
					top: tcT,
					left: tcL
				});
			}
			$(function() {
				$('.doubledate').kuiDate({
					className: 'doubledate',
					isDisabled: "1" // isDisabled为可选参数，“0”表示今日之前不可选，“1”标志今日之前可选
				});

			});
			$(function() {
				
				$(".search").click(function(){
					var starttime = $("#starttime").val();
					var endtime = $("#endtime").val();
					var sub_uid = $("#sub_uid").val();
					var type=1;//搜索条件搜索
					if(endtime == '' && starttime== '' && sub_uid== ''){
						location.reload(true);
						return;
					}
					$.ajax({
						type:"POST",
						url:"/Home/Index/distribut_list",
						data:{"sub_uid":sub_uid,"starttime":starttime,"endtime":endtime,"type":type},
						dataType:"json",
						async:false,//同步操作
						success:function(data){
							$("#sub_list").html("");
							var html ="<ul>";
							$.each(data.data.distribut_income_detail,function(i,item){
								html += "<li>"
								html += "<a>"+item['user_id']+"</a>";
								html += "<a>"+item['nickname']+"</a>";
								html += "<a class='mobile'>"+item['mobile']+"</a>";
								html += "<a>+"+item['distribut_income']+"</a>";
								html += "<a>+"+item['distribut_income_count']+"</a>";
								html += "<a>"+item['reg_time']+"</a>";
								html += "<a class='xx_xian' user_id="+item['user_id']+" href='javascript:;'>TA的下线</a>";
								html += "</li>";
							});	
							html +="</ul>";
							$("#sub_list").append(html);
						}
					});
					$(".mobile").each(function() {
						var　 srr = $(this).text();
						var srrr = srr.substring(0, 3) + "****" + srr.substring(7, 11);
						$(this).text(srrr);
					});
				});
				
				$(".xx_xian").live("click",function() {
					var sub_user_id = $(this).attr("user_id");
					//查询下线
					$.ajax({
						type:"POST",
						url:"/Home/Index/distribut_list",
						data:{"sub_user_id":sub_user_id},
						dataType:"json",
						async:false,//同步操作
						success:function(data){
							$("#sub_id").html(data.data.user_info.user_id);
							$("#sub_nickname").html(data.data.user_info.nickname);
							$("#sub_mobile").html(data.data.user_info.mobile);
							$("#sub_distribut_list").html("");
							if(data.data.distribut_income_detail.length == 0){
								$("#sub_distribut_list").append("<div style='text-align:center'>暂无下线</div>");
								return;
							}
							var html ="<ul><li>";
							$.each(data.data.distribut_income_detail,function(i,item){
								html += "<a>"+item['user_id']+"</a>";
								html += "<a>"+item['nickname']+"</a>";
								html += "<a class='mobile'>"+item['mobile']+"</a>";
								html += "<a>+"+item['distribut_income']+"</a>";
								html += "<a>+"+item['distribut_income_count']+"</a>";
								html += "<a>"+item['reg_time']+"</a>";
							});	
							html +="</li></ul>";
							$("#sub_distribut_list").append(html);
						}
					});
					$(".xx_tc").show();
					attrd();
					$(window).resize(function() {
						attrd();
					});
					$(".mobile").each(function() {
						var　 srr = $(this).text();
						var srrr = srr.substring(0, 3) + "****" + srr.substring(7, 11);
						$(this).text(srrr);
					});
				})
				$(".xx_close").click(function() {
					$(this).parents(".xx_tc").hide();
				})
				$(".mobile").each(function() {
					var　 srr = $(this).text();
					var srrr = srr.substring(0, 3) + "****" + srr.substring(7, 11);
					$(this).text(srrr);
				});
			})
		</script>
		<!--<header class="mui-bar mui-bar-nav white hx_1 fs_xl">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title fs_xl">推广收益详情</h1>
		</header>
		<div class="mui-content fs_xl">
			<div class="fx_list">
				<ul>
					<foreach name="dis_users" item="vo" key="k">
					<li class="cls">
						<a class="fx_name fs_s">ID：{$vo.user_id}</a>
						<a class="fx_name fs_s">昵称：{$vo.nickname}{$vo.user_id}</a>
						<a class="fx_time fs_s">{$vo.reg_time|date="Y-m-d H:i:s",###}</a>
						<a class="fx_pri fs_xs"><span class="fs_xs">¥<em class="fs_i">{$vo.income}</em></span>收益</a>
					</li>
					</foreach>
				</ul>
			</div>
		</div>-->

	</body>

</html>